let checkoutApp=new Vue({
    el:"#checkoutApp",
    data:{
        cart:{},
        addresses:[]
    },
    methods:{
        loadCart:function () {
            this.$forceUpdate();
            axios({
                url:"/carts/my",
                method:"get"
            }).then(function (response) {
                checkoutApp.cart=response.data;
            })
        },
        getAddresses:function () {
            axios({
                url:"/order/getAddresses",
                method:"get"
            }).then(function (response) {
                if(typeof(response.data)=="string"){
                    location.href="/index.html";
                }
                checkoutApp.addresses = response.data;
            });
        },
        initUpdateAddressForm:function (address,index) {
            updateAddressForm.$options.methods.initUpdateAddressForm(address,index);
            toUpdateAddressWinFn();
        }
    },
    created:function () {
        this.loadCart();
        this.getAddresses();
    }
});
let addAddressForm=new Vue({
    el:'#addAddressForm',
    data:{
        provinces:{},
        provinceActive:"",
        citys:{},
        cityActive:"",
        zones:{},
        zoneActive:"",
        street:'',
        postcode:'',
        customerName: '',
        phone:'',
        status:'',
        hasError: false,
        message:''
    },
    methods:{
        addAddress:function () {
            let form=new FormData();
            form.append("provinceName",this.provinceActive);
            form.append("cityName",this.cityActive);
            form.append("zoneName",this.zoneActive);
            form.append("street",this.street);
            form.append("postcode",this.postcode);
            form.append("customerName",this.customerName);
            form.append("phone",this.phone);
            axios({
                method:'post',
                url:'/order/addAddress',
                data:form
            }).then(function(response) {
                    // 地址添加失败
                    if(typeof(response.data)=="string"){
                        console.log(response.data);
                        addAddressForm.hasError = true;
                        addAddressForm.message = response.data;
                        // 重新设置弹出层大小,避免出现滚动条
                        $.colorbox.resize();
                    }else{
                        console.log(response.data);
                        checkoutApp.addresses.push(response.data);
                        addAddressForm.hasError = false;
                        // 关闭弹出层
                        $.colorbox && $.colorbox.close();
                    }
                });
            for( let key in this.$data){
                // provinces为所有省,不用重置
                if(key=="provinces"){
                    // 跳过
                }else if(typeof(this.$data[key])=="object"){
                    this.$data[key]={};
                }else if(typeof(this.$data[key])=="boolean"){
                    this.$data[key]=false;
                }else{
                    this.$data[key]="";
                }
            }
            console.log("重置表单后:");
            console.log(this.$data);
        },
        getAllProvinces:function () {
            axios({
                url:"/order/provinces",
                method:"get"
            }).then(function (response) {
                addAddressForm.provinces=response.data;
            })
        },
        getCitys:function (event) {
            // let index=obj.selectedIndex;
            this.provinceActive=event.target.value;
            axios({
                url:"/order/"+this.provinceActive+"/citys",
                method: "get"
            }).then(function (response) {
                addAddressForm.citys=response.data;
                Vue.set(addAddressForm,"cityActive","");
                Vue.set(addAddressForm,"zones",null);
                Vue.set(addAddressForm,"zoneActive","");
            })
            // this.$options.methods.getProvinceNames();
        },
        getZones:function (event) {
            this.cityActive=event.target.value;
            axios({
                url:"/order/"+this.cityActive+"/zones",
                method:"get"
            }).then(function (response) {
                addAddressForm.zones=response.data;
                Vue.set(addAddressForm,"zoneActive","");
            })
        },
        getCurrentZone:function (event) {
            this.zoneActive=event.target.value;
        }
    },
    created:function () {
        this.getAllProvinces();
    }
});

let updateAddressForm=new Vue({
    el:'#updateAddressForm',
    data:{
        addressId:"",
        addressIndex:"",
        provinces:{},
        provinceActive:"",
        citys:{},
        cityActive:"",
        zones:{},
        zoneActive:"",
        street:'',
        postcode:'',
        customerName: '',
        phone:'',
        status:'',
        hasError: false,
        message:''
    },
    methods:{
        initUpdateAddressForm:function(address,index){
            updateAddressForm.addressIndex = index;
            updateAddressForm.addressId = address.id;
            updateAddressForm.provinceActive=address.provinceName;
            console.log(updateAddressForm.provinceActive);
            axios({
                url:"/order/"+updateAddressForm.provinceActive+"/citys",
                method: "get"
            }).then(function (response) {
                updateAddressForm.citys=response.data;
                updateAddressForm.cityActive=address.cityName;
                axios({
                    url:"/order/"+updateAddressForm.cityActive+"/zones",
                    method:"get"
                }).then(function (response) {
                    updateAddressForm.zones=response.data;
                    updateAddressForm.zoneActive=address.zoneName;
                })
            });
            updateAddressForm.street = address.street;
            updateAddressForm.postcode = address.postcode;
            updateAddressForm.customerName = address.customerName;
            updateAddressForm.phone = address.phone;

        },
        updateAddress:function (addressIndex) {
            let form=new FormData();
            form.append("addressId",this.addressId);
            form.append("provinceName",this.provinceActive);
            form.append("cityName",this.cityActive);
            form.append("zoneName",this.zoneActive);
            form.append("street",this.street);
            form.append("postcode",this.postcode);
            form.append("customerName",this.customerName);
            form.append("phone",this.phone);
            axios({
                method:'post',
                url:'/order/updateAddress',
                data:form
            }).then(function(response) {
                // 地址修改失败
                if(typeof(response.data)=="string"){
                    console.log(response.data);
                    updateAddressForm.hasError = true;
                    updateAddressForm.message = response.data;
                    // 重新设置弹出层大小,避免出现滚动条
                    $.colorbox.resize();
                }else{
                    console.log(response.data);
                    updateAddressForm.hasError = false;
                    Vue.set(checkoutApp.addresses,addressIndex,response.data);
                    // 关闭弹出层
                    $.colorbox && $.colorbox.close();
                }
            });
        },
        getAllProvinces:function () {
            axios({
                url:"/order/provinces",
                method:"get"
            }).then(function (response) {
                updateAddressForm.provinces=response.data;
            })
        },
        getCitys:function (event) {
            // let index=obj.selectedIndex;
            this.provinceActive=event.target.value;
            axios({
                url:"/order/"+this.provinceActive+"/citys",
                method: "get"
            }).then(function (response) {
                updateAddressForm.citys=response.data;
                Vue.set(updateAddressForm,"cityActive","");
                Vue.set(updateAddressForm,"zones",null);
                Vue.set(updateAddressForm,"zoneActive","");
            })
            // this.$options.methods.getProvinceNames();
        },
        getZones:function (event) {
            this.cityActive=event.target.value;
            axios({
                url:"/order/"+this.cityActive+"/zones",
                method:"get"
            }).then(function (response) {
                updateAddressForm.zones=response.data;
                Vue.set(updateAddressForm,"zoneActive","");
            })
        },
        getCurrentZone:function (event) {
            this.zoneActive=event.target.value;
        }
    },
    created:function () {
        this.getAllProvinces();
    }
});

function setAddressActive(item){
    $(".address-item").removeClass("active");
    $(item).addClass("active");
}
/*
$(function () {
    $(".address-item").click(function () {
        $(".address-item").removeClass("active");
        $(this).addClass("active");
    });
})

 */